I'm trying to remove a given element once the date passes the date in the string using append. Would I need to convert it first?
The date string above is listed in h2 tags.
So far I've just done this to get access to the date:
var today = new Date();
let dates = document.getElementsByTagName("h2");
for(date of dates){
console.log(date.innerHTML)
}
You could try something along the lines of the following:
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id); mobile = /Mobi/i.test(nav.userAgent);
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = (node, ...classNames)=>{
node.classList.add(...classNames);
return aC;
}
rC = (node, ...classNames)=>{
node.classList.remove(...classNames);
return rC;
}
tC = (node, className)=>{
node.classList.toggle(className);
return tC;
}
// tiny library above for reuse on other loads - magic below can be put on another page except `}) // end load` line
let h2s = Q('h2'), dt = new Date, nd, yr;
dt.setHours(0); dt.setMinutes(0); dt.setSeconds(0); dt.setMilliseconds(0);
yr = dt.getFullYear(); dt = dt.getTime();
for(let h2 of h2s){
nd = new Date(h2.textContent.split(', ')[1]+', '+yr); nd.setHours(0);
nd.setMinutes(0); nd.setSeconds(0); nd.setMilliseconds(0);
if(nd.getTime() < dt)h2.remove();
}
}); // end load
//]]>/* css/external.css */
*{
box-sizing:border-box;
}<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title><h2> Date Question</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<h2>Mon, Sep 27</h2>
<h2>Tue, Sep 28</h2>
<h2>Wed, Sep 29</h2>
<h2>Thu, Sep 30</h2>
<h2>Fri, Oct 1</h2>
<h2>Sat, Oct 2</h2>
<h2>Sun, Oct 3</h2>
</body>
</html>